<template>
	<div class="page-team">
		<el-container class='el-container-mode'>
			<div class="menu-bar">

				<el-tabs v-model="activeName" class="top" @tab-click="handleClick">
					<el-tab-pane label="公共概览" name="first">

            <el-menu :default-active="menuActiveIndex" class="el-menu-vertical" text-color='#BFCBD9'
                     :unique-opened='true' @select='handleMenuSelect'>
              <el-submenu v-for="(group, groupIndex) in publicList" index="`${groupIndex}`"
                          :key='group.id'>
                <template slot="title">
                  <i class="el-icon-menu menu-icon"></i>
                  <span slot="title">{{ group.teamName }}</span>
                </template>
                <el-menu-item v-for="(overview, overviewIndex) in publicList[groupIndex].pageList"
                              :index="`${groupIndex}-${overviewIndex}`" @click='handlePageSelect(overview)'
                              class="group-menu">{{ overview.overviewName }}
                </el-menu-item>
              </el-submenu>
            </el-menu>
					</el-tab-pane>
					<el-tab-pane label="我的概览" name="second">
						<el-menu :default-active="menuActiveIndex" class="el-menu-vertical" text-color='#BFCBD9'
							:unique-opened='true' @select='handleMenuSelect'>
							<el-submenu v-for="(group, groupIndex) in groupList" index="`${groupIndex}`"
								:key='group.id'>
								<template slot="title">
									<i class="el-icon-menu menu-icon"></i>
									<span slot="title">{{ group.teamName }}</span>
								</template>
								<el-menu-item v-for="(overview, overviewIndex) in groupList[groupIndex].pageList"
									:index="`${groupIndex}-${overviewIndex}`" @click='handlePageSelect(overview)'
									class="group-menu">{{ overview.overviewName }}
								</el-menu-item>
							</el-submenu>
						</el-menu>
					</el-tab-pane>
				</el-tabs>



				<div class="menu-buttons" v-show="activeName==='second'">
					<span @click="addOverviewDialogVisible = true"><i class="el-icon-plus"></i></span>
					<span @click="manageGroupSortVisible = true"><i class="el-icon-s-operation"></i></span>
					<span @click="setOverviewPagePublic"><i class="el-icon-share"></i></span>
				</div>
			</div>

			<el-main class='el-main-mode' @send="onSend">
				<div class="overview-header">
					<div class="floder">
						<i class="el-icon-s-fold" v-show="!collapse" @click='collapse = !collapse'></i>
						<i class="el-icon-s-unfold" v-show="collapse" @click='collapse = !collapse'></i>
					</div>
					<div class="page-title">
						<el-breadcrumb separator="/">
							<el-breadcrumb-item>{{groupTitle}}</el-breadcrumb-item>
							<el-breadcrumb-item>{{overviewTitle}}</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
						v-hasPermi="['overview:team:add']" class="add-component-button">新建组件</el-button>
				</div>
				<draggable animation="500" v-model="componentList" class="overviews" @start="onStart" @end="onEnd">
					<overviewComponent class="component" v-for="(showingItem, index) in componentList"
						:class="[`${showingItem.windowType}`, `${showingItem.showingType || ''}`]" :key='showingItem.id'
						:setupProps='showingItem'></overviewComponent>
				</draggable>
				<div style="clear:both;"> </div>
			</el-main>

		</el-container>

		<!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" /> -->

		<!-- 新建组件,选择分析类型 -->
		<el-dialog :title="title" :visible.sync="open" width="510px" class="add-component">
			<div class="left-content">
				<div class="content-title">
					模型分析
				</div>
				<div class="content-items">
					<div class="left-content-item item-hover" v-for="(item, index) in typeOptions"
						@click="chooseEventType(item)">
						<div class="item-icon"><i :class="item.cssClass"></i></div>
						<div class="item-title">{{item.dictLabel}}</div>
					</div>
				</div>
			</div>
			<div class="right-content">
				<div class="content-title">
					渠道对比
				</div>
				<div class="right-content-items">
					<div class="right-content-item item-hover">
						<div class="item-icon"><i class="el-icon-fork-spoon"></i></div>
						<div class="item-title">渠道对比</div>
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 新建组件，配置相关属性并添加到概览 -->
		<el-dialog :title="setupComponentTitle" :visible.sync="setupComponentVisible" width="650px"
			class="setup-component" :before-close='reset'>
			<el-form ref="setupForm" :model="setupForm" :rules="setupRules" label-width="120px" label-position='left'>

				<el-form-item label="组件名称" prop="componentName">
					<el-input v-model="setupForm.componentName" placeholder="请输入组件名称" />
				</el-form-item>
				<template v-if="setupForm.analyticsType == 'event'">
					<el-form-item label="时间粒度" prop="dateUnit">
						<el-select v-model="setupForm.dateUnit" placeholder="请选择时间粒度">
							<el-option v-for="dict in dateUnitOptions" :key="dict.dictValue" :label="dict.dictLabel"
								:value="dict.dictValue"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="图表类型" prop="chartType" class="chartype">
						<div class="chart-type-item"
							:class="{active: index == activeChartTypeIndex, forbidden: item.chartName == '环图'}"
							v-for="(item, index) in chartTypeOptions" @click="chartTypeChangeFun(index, item)">
							<i :class="item.chartIcon"></i>
							<span>{{item.chartName}}</span>
							<div class="check-tag" v-if="index == activeChartTypeIndex">
								<i class="el-icon-check"></i>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="显示项类型" v-show="currChartItemOptions.length != 0" prop="showItem">
						<el-checkbox-group v-model="setupForm.showItem">
							<el-checkbox v-for="dict in currChartItemOptions" :key="dict.dictValue"
								:label="dict.dictValue">
								{{dict.dictLabel}}
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</template>
				<el-form-item label="显示窗口类型" class="window-type" prop="windowType">
					<div class="window-type-item"
						:class="{active: index == windowTypeIndex, forbidden: setupForm.chartType != 6 && item.dictValue =='small'}"
						v-for="(item, index) in windowTypeOptions" :key='item.dictValue'
						@click="windowTypeChangeFun(index, item)">
						<div class="window-type-back" :class="[`${item.dictValue}`]"></div>
						<div class="label">
							{{item.dictLabel}}
						</div>
						<div class="check-tag" v-if="index == windowTypeIndex">
							<i class="el-icon-check"></i>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="setupForm.remark" placeholder="请输入备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog class="addOverviewOrGroup" title="新建我的概览/分组" :visible.sync="addOverviewDialogVisible" width="318px"
			:before-close="handleAddOverviewDialogClose">
			<el-form ref="addOverviewForm" :model="addOverviewForm" label-width="80px" label-position='top' size="small"
				:rules="addOverviewFormRules">
				<el-form-item label="新建类型" prop="addType">
					<el-radio v-model="addOverviewForm.addType" label="1">创建概览</el-radio>
					<el-radio v-model="addOverviewForm.addType" label="2">创建分组</el-radio>
				</el-form-item>
				<template v-if="addOverviewForm.addType=='1'">
					<el-form-item label="概览名称" prop="overviewName">
						<el-input v-model="addOverviewForm.overviewName"></el-input>
					</el-form-item>
					<el-form-item label="所属分组" prop="team">
						<el-select v-model="addOverviewForm.team" placeholder="所属分组" value-key="id">
							<el-option v-for="dict in groupList" :key="dict.id" :label="dict.teamName" :value="dict">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="排序" prop="overviewSortNo">
						<el-input v-model="addOverviewForm.overviewSortNo" placeholder="请输入排序"></el-input>
					</el-form-item>
				</template>
				<template v-if="addOverviewForm.addType=='2'">
					<el-form-item label="分组名称" prop="teamName">
						<el-input v-model="addOverviewForm.teamName" placeholder="请输入分组名"></el-input>
					</el-form-item>
					<el-form-item label="排序" prop="teamSortNo">
						<el-input v-model="addOverviewForm.teamSortNo" placeholder="请输入排序"></el-input>
					</el-form-item>
				</template>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addOverviewDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAddOverviewsOrGroup">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog :visible.sync="manageGroupSortVisible" width="520px" class="manage-group-sort">
			<div slot='title' class="group-sort-header">
				<span v-if="checkedTreeIdList.length == 0">管理我的概览排序</span>
				<div v-else-if='checkedTreeIdList.length > 0'>
					<el-popover popper-class="page-overview-little-pop" placement="bottom" title="移动到" width="297"
						trigger="click" @hide='beforePopHide'>
						<p class="line1">
							<span>一级分类</span>
							<el-select v-model="overviewMoveTo" placeholder="请选择" style="width: 170px;">
								<el-option v-for="(item, index) in groupList" :key="item.id" :label="item.teamName"
									:value="index">
								</el-option>
							</el-select>
						</p>
						<p class="line2">
							<el-button type="text" size="mini" @click='itemsMoveToPopVisible = false'>取消</el-button>
							<el-button type="primary" size="mini" @click='itemsMoveTo'>确认</el-button>
						</p>
						<el-button slot="reference" @click.stop='itemsMoveToPopVisible = true' size="small"
							style="margin-right: 8px;">移动到</el-button>
					</el-popover>
					<el-button size="small" @click='cancelAllCheck'>取消多选</el-button>
				</div>
				<el-input prefix-icon="el-icon-search" v-model="addOverviewFormRules.message" clearable
					placeholder="搜索概览名称" style="width: 210px;" size="small"></el-input>
			</div>
			<div class="group-sort-body">
				<el-tree class="tree" ref="tree" :data="groupList" :props="{
					label: 'label',
					children: 'pageList',
				}" node-key="treeId" show-checkbox :allow-drop="allowDrop" @check-change="handleGroupSortCheckChange" draggable
					:check-on-click-node='true' :check-strictly='true'>
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ node.label }}</span>
						<span>
							<el-popover popper-class="page-overview-little-pop" v-if="data.treeType == 'S'"
								v-model="data.btnActive" placement="bottom" title="移动到" width="297" trigger="manual"
								@hide='beforePopHide'>
								<p class="line1">
									<span>一级分类</span>
									<el-select v-model="overviewMoveTo" placeholder="请选择" style="width: 170px;">
										<el-option v-for="(item, index) in groupList" :key="item.id"
											:label="item.teamName" :value="index">
										</el-option>
									</el-select>
								</p>
								<p class="line2">
									<el-button type="text" size="mini" @click='handleCancelLittlePop(data)'>取消
									</el-button>
									<el-button type="primary" size="mini" @click='handleMove(data)'>确认</el-button>
								</p>
								<el-button slot="reference" class="move-btn"
									:class="{'btnActive': data.treeId == activeBtnId}" type="text"
									@click.stop='openMovePop(node, data)'>移动到</el-button>
							</el-popover>
						</span>
					</span>
				</el-tree>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button icon="el-icon-plus" type="primary" class="add-group-btn" size="small" @click='addNewGroup'>
					新建分组</el-button>
				<el-button @click="manageGroupSortVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="manageGroupSortFun" size="small">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog class="manage-my-overview" :visible.sync="manageMyOverviewVisible" :fullscreen="true">
			<div>
				<div class="line1">
					<span><i class="el-icon-arrow-left" style="cursor:pointer" @click="prev()"></i>管理我的概览</span>
				</div>
				<div class="line2" v-if="selection.length == 0">
					<div>
						<span class="label">创建人</span>
						<el-select v-model="value" placeholder="请选择" style="width: 190px;" size="small">
							<el-option v-for="item in [1,2,3,4]" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<div>
						<span class="label">所属分组</span>
						<el-select v-model="value" placeholder="请选择" style="width: 190px;" size="small">
							<el-option v-for="item in [1,2,3,4]" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<div class="right-menu">
						<el-input prefix-icon="el-icon-search" placeholder="搜索概览名称"
							v-model="addOverviewFormRules.message" style="width: 200px;margin-right: 12px;"
							size="small"></el-input>
						<el-button size="small" @click='manageGroupSortVisible = true'>设置概览显示顺序</el-button>
					</div>
				</div>
				<div class="line3" v-else>
					<el-button size='small'>增加可访问成员</el-button>
					<el-button size='small' icon="el-icon-refresh-right">重置分享设置</el-button>
					<el-button size='small' icon="el-icon-delete">删除</el-button>
					<el-button size='small'>取消</el-button>
				</div>
				<div class="table">
					<el-table :data="tableData" style="width: 100%" @selection-change='handleSelectionChange'>
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="name" label="名称">
						</el-table-column>
						<el-table-column prop="group" label="所属分组" width="220">
						</el-table-column>
						<el-table-column prop="address" label="共享给...">
						</el-table-column>
						<el-table-column prop="creater" label="创建人" width="180">
						</el-table-column>
						<el-table-column prop="action" label="操作" width="250">
							<template slot-scope='scope'>
								<el-button type="text" @click=shareTeam>分享</el-button>
								<el-popover class="edit-overview" placement="bottom" title="编辑此概览" width="318"
									trigger="click">
									<div class="overview-edit-body">
										<div class="edit-content">
											<p class="label">概览名称</p>
											<p>
												<el-input></el-input>
											</p>
											<p class="label">概览分组</p>
											<p>
												<el-select v-model="value" placeholder="请选择">
													<el-option v-for="item in groupList" :key="item.id"
														:label="item.teamName" :value="item.id">
													</el-option>
												</el-select>
											</p>
										</div>
										<div class="edit-footer">
											<el-button type="primary" size="small">确定</el-button>
										</div>
									</div>
									<el-button type="text" slot="reference"><i class="el-icon-edit"
											style="color: #99A9BF;padding: 0 16px;"></i></el-button>
								</el-popover>
								<el-popover class="delete-overview" placement="bottom" title="删除概览" width="242"
									trigger="click">
									<div class="overview-edit-body">
										<!-- <div class="edit-title">编辑此概览</div> -->
										<div>删除后，此概览将不在「我的概览」中显示，概览中的书签均可在「书签」模块下查看</div>
										<el-checkbox v-model="checked">同时删除概览内的书签</el-checkbox>
										<p>
											<el-button type="primary" size="small">确定</el-button>
										</p>
									</div>
									<el-button type="text" slot="reference"><i class="el-icon-delete"
											style="color: #FC6772;"></i></el-button>
								</el-popover>

							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</el-dialog>

		<!-- <el-dialog class="share-setup" :visible.sync="shareSetupVisible" width="520px">
			<div class="setup-title">
				<span>分享设置</span>
				<i class="el-icon-close" @click="shareSetupVisible = false"></i>
			</div>
			<div class="setup-content">
				<div class="radio-group">
					<el-radio-group v-model="radio">
						<el-radio :label="3">备选项</el-radio>
						<el-radio :label="6">备选项</el-radio>
						<el-radio :label="9">备选项</el-radio>
					</el-radio-group>
				</div>
				<div class="tips" v-show="radio == 3">设置后，此概览将仅可你自己查看。其他成员均不可查看。</div>
				<div v-show="radio == 9">
					<el-input placeholder="搜索成员姓名"></el-input>
				</div>
			</div>
			<div class="btns">
				<el-button type="primary" size="small" @click="shareSetupVisible = false">取 消</el-button>
				<el-button type="primary" size="small" @click="shareTeam">保存</el-button>
			</div>
		</el-dialog> -->

	</div>
</template>

<script>
import draggable from 'vuedraggable'
import {

  getAllGroupAndOverview,
  listTeam,
  getTeam,
  delTeam,
  addTeam,
  updateTeam,
  exportTeam, mamagePageTeams, getPublicOverview, setPagePublic
} from "@/api/overview/team";
import {
	addType,
	listType
} from "@/api/overview/type";
import {
	sharePage,
	getPublicDta,
	listPage,
	getPage,
	addPage,
} from "@/api/overview/page";
import {
	listItems,
	getItems,
	delItems,
	addItems,
	updateItems,
	exportItems
} from "@/api/overview/items";
import overviewComponent from '../components/index.vue'
import {getMark} from "@/api/overview/mark";
export default {
	name: "Team",
	components: {
		draggable,
		overviewComponent,
	},
	data() {
		return {
			updateYemian: '',
			exportLoading: false,
			collapse: false,
			ifshowMenubutton: true,

			activeName: "first",

			//添加分组或概览的弹窗
			addOverviewDialogVisible: false,
			manageGroupSortVisible: false,
			manageMyOverviewVisible: false,
			//编辑我的概览 pop
			overviewEditVisible: false,
			addOverviewForm: {
				addType: '1',
				overviewName: '',
				overviewSortNo: null,
				team: null,
				teamName: '',
				teamSortNo: null,
			},

			//概览table选中项
			selection: [],
			//菜单激活index
			menuActiveIndex: '0-0',

			//所有分组
			groupList: [],
			// 公共概览的数据
			publicList:[],

			//添加到概览弹窗
			setupComponentTitle: '',
			setupComponentVisible: false,
			setupForm: {
				pageId: null,
				componentName: null,
				analyticsType: null,
				remark: null,
				dateUnit: null,
				chartType: null,
				showItem: [],
				windowType: null,
				queryRule: null,
				sortNo: null,
				paramField1: null,
				paramField2: null,
			},

			//选择分析类型弹窗
			title: '',
			open: false,
			checked:"",

			//移动至该 组
			overviewMoveTo: null,
			//激活的按钮id
			// activeBtnId: '',
			//当前树中选中的节点
			checkedTreeIdList: [],
			// 排序顶部主按钮的pop
			// itemsMoveToPopVisible: false,

			// 分享设置对话框
			shareSetupVisible: false,

			// 遮罩层
			// loading: true,
			queryParams: {},

			typeOptions: [],
			userPageOptions: [],
			// 时间粒度字典
			dateUnitOptions: [],
			// 图表类型字典
			chartTypeOptions: [],
			// 显示窗口类型字典
			windowTypeOptions: [],
			// 显示项类型字典
			showItemOptions: [],

			activeChartTypeIndex: null,
			windowTypeIndex: null,

			//当前选中的概览页
			selectUserPage: {},
			// 组件列表
			componentList: [],

			addOverviewFormRules: {
				overviewName: [{
					required: true,
					message: '请输入概览名称',
					trigger: 'blur'
				},],
				team: [{
					required: true,
					message: '请选择所属分组',
					trigger: 'blur'
				}],
				teamName: [{
					required: true,
					message: '请输入分组名称',
					trigger: 'blur'
				}],
			},
			setupRules: {
				componentName: [{
					required: true,
					message: '请输入组件名',
					trigger: 'blur'
				},],
				dateUnit: [{
					required: true,
					message: '请选择事件粒度',
					trigger: 'blur'
				},],
				chartType: [{
					required: true,
					message: '请选择图表类型',
					trigger: 'blur'
				},],
				showItem: [{
					required: true,
					message: '请选择显示项类型',
					trigger: 'blur'
				},],
				windowType: [{
					required: true,
					message: '请选择窗口类型',
					trigger: 'blur'
				},],
			},
			value: '',
			tableData: [{
				name:"新建概览",
				group:"基础指标",
				address:"公共概览",
				creater:"本人"
			},
			{
				name:"基础指标监控",
				group:"基础指标",
				address:"公共概览",
				creater:"本人"
			},
			{
				name:"测试概览0329",
				group:"测试分组0329",
				address:"公共概览",
				creater:"本人"
			},
		],
			radio: 3,
		}
	},
	computed: {
		currChartItemOptions() {
			let currChartItemOptions = []
			let checkedItem = []
			let currentChart = this.chartTypeOptions[this.activeChartTypeIndex] || {}
			let showItems = currentChart.valueItem
			if (showItems) {
				this.showItemOptions.forEach(opt => {
					if (showItems.indexOf(opt.dictValue) != -1) {
						currChartItemOptions.push(opt)
						checkedItem.push(opt.dictValue)
					}
				})
				this.setupForm.showItem = checkedItem
				return currChartItemOptions
			} else {
				return []
			}
		},

		groupTitle() {
			let pageIndex = this.menuActiveIndex
			let mainMenuSelcted = this.groupList.length && this.groupList[parseInt(pageIndex)]
			return mainMenuSelcted?mainMenuSelcted.teamName:''
		},

		overviewTitle() {
			let pageIndex = this.menuActiveIndex
			let mainMenuSelcted = this.groupList.length && this.groupList[parseInt(pageIndex)]
			let subMenuSelcted = mainMenuSelcted && mainMenuSelcted.pageList.length && mainMenuSelcted.pageList[(
				parseInt(pageIndex.split('-')[1]))]
			return subMenuSelcted.overviewName
		},

		treeMap() {
			let treeMap = {}
			this.groupList.forEach((item, index) => {
				treeMap[`${item.createTime}`] = `${index}`
				item.pageList.forEach((overview, overviewIndex) => {
					treeMap[`${overview.createTime}`] = `${index}-${overviewIndex}`
				})
			})
			return treeMap
		},

	},

	watch: {
		collapse(newval, oldval) {
			console.log(newval, oldval)
			let self = this
			if (!newval) {
				setTimeout(() => {
					self.ifshowMenubutton = true
				}, 250)
			} else {
				self.ifshowMenubutton = false
			}
		},

		treeMap(newval) {
			this.$nextTick(() => {
				if (this.$refs['tree']) {
					this.checkedTreeIdList = this.$refs['tree'].getCheckedKeys()
				} else {
					this.checkedTreeIdList = []

				}
				console.log(this.checkedTreeIdList)
			})
		}
	},

	mounted() {
		this.$EventBus.$on("refreshOverviews", () => {
			// A发送来的消息
			this.getComponentsByPageid().then(() => {
				console.log('running here');
			})
		});
		this.public()
		this.shareTeam()
	},
	created() {
		this.getPublicOverviewMenu()
		this.getAllGroupAndOverview()
		this.getChartTypeData()
		this.getDicts("sys_time_unit_type").then(response => {
			this.dateUnitOptions = response.data;
		});
		this.getDicts("sys_window_type").then(response => {
			this.windowTypeOptions = response.data;
		});
		this.getDicts("sys_overview_item_type").then(response => {
			this.showItemOptions = response.data;
		});
		this.getDicts("sys_overview_comp_type").then(response => {
			this.typeOptions = response.data;
		});
		// this.getAllGroups()
	},
	activated() {
		this.getAllGroupAndOverview()
	},
	methods: {
		// 公共概览
    getPublicOverviewMenu() {
      getPublicOverview().then(res => {
        this.publicList = res.data;
        let page=this.publicList[0].pageList[0]
        this.handlePageSelect(page)
      })
		},

    setOverviewPagePublic(){
      let pageId=this.selectUserPage.id;
      setPagePublic(pageId).then(response => {
        this.msgSuccess("分享成功");
      });
    },

		prev() {
			this.$router.go(-1)
		},
		handlePublicPageSelect(item){
      this.selectUserPage = item
      console.log(this.selectUserPage.id)
      this.getComponentsByPageid()
		},
		handlePageSelect(item, index) {
			this.selectUserPage = item
			console.log(this.selectUserPage.id)
      this.getComponentsByPageid()

		},

		handleMenuSelect(index, indexPath) {
			this.menuActiveIndex = index
		},

		getAllGroupAndOverview() {
			getAllGroupAndOverview().then(res => {
				this.groupList = res.data
				if (this.groupList.length !== 0 && this.groupList[0].pageList.length !== 0) {
					let [mainMenuIndex, submenuIndex] = this.menuActiveIndex && this.menuActiveIndex.split('-')
					//this.selectUserPage = this.groupList[mainMenuIndex].pageList[submenuIndex]
					//this.getComponentsByPageid()
					//this.formateGroupList()
					// this.createTreeMap()
				}
			})
		},

		//创建tree 各节点与原始数组中位置 对应关系的映射map
		// createTreeMap() {
		// 	let treeMap = {}
		// 	this.groupList.forEach((item, index) =>{
		// 		treeMap[`${item.createTime}`] = `${index}`
		// 		item.pageList.forEach((overview, overviewIndex) =>{
		// 			treeMap[`${overview.createTime}`] = `${index}-${overviewIndex}`
		// 		})
		// 	})
		// 	console.log(treeMap)
		// 	this.treeMap = treeMap
		// },

		//加入拖拽需要的属性
		formateGroupList() {
			this.groupList = this.groupList.map((group, index) => {
				group.treeId = group.createTime //createTime 做树中的唯一值
				group.label = group.teamName
				group.treeType = 'F' //fathen 父节点
				group.disabled = true
				group.pageList = group.pageList.map((item, pageIndex) => {
					item.label = item.overviewName
					item.treeId = item.createTime
					item.treeType = 'S' //子节点
					item.btnActive = false
					return item
				})
				return group
			})
		},

		getComponentsByPageid() {
			let pageId = this.selectUserPage.id
			return getPage(pageId).then(({
				data
			}) => {
				this.componentList = data.overviewItemList
			})
		},

		//获取图表类型
		getChartTypeData() {
			let parmas = {};
			listType(parmas).then(response => {
				this.chartTypeOptions = response.rows;
				this.chartTypeChangeFun(0, this.chartTypeOptions[0])
			});
		},

		chartTypeChangeFun(index, item) {
			if (item.chartName == '环图') return
			this.setupForm.chartType = item.id
			this.activeChartTypeIndex = index
			this.setupForm.windowType = null
			this.windowTypeIndex = null
		},

		windowTypeChangeFun(index, item) {
			if (this.setupForm.chartType != 6 && item.dictValue == 'small') return
			this.setupForm.windowType = item.dictValue
			this.windowTypeIndex = index
		},

		chooseEventType(item) {
			this.open = false
			// return
			if (item.dictValue === 'attr') {
				this.msgSuccess("拼命完善中，敬请期待！");
				return false;
			}
			this.$router.push(`/sensorsdata/${item.dictValue}`)
			// this.$router.push(`/sensorsdata`)
		},
		// chooseEventType(item) {
		// 	let permissionAnalyse = ['event', 'funnel']
		// 	this.setupComponentVisible = true
		// 	this.setupComponentTitle = '添加到概览'
		// 	this.setupForm.analyticsType = item.dictValue
		// },
		onSend(item) {
			this.updateYemian = item.id;
		},

		onStart() {
		},

		onEnd() {
			console.log(this.componentList)
			let arr = this.componentList.map((item) => {
				return item.sortNo
			})
			console.log(arr)
		},

		/** 搜索按钮操作 */
		handleQuery() {
			// this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},

		/** 新增按钮操作 */
		handleAdd() {
			// this.reset();
			this.open = true;
			this.title = "新建组件";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids
			getTeam(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改我的概览";
			});
		},

		//新增分组或概览
		handleAddOverviewsOrGroup() {
			this.$refs['addOverviewForm'].validate((valid) => {
				if (valid) {
					let params = this.addOverviewForm
					params = this.addOverviewForm.addType == 1 ? {
						overviewName: params.overviewName,
						sortNo: params.overviewSortNo,
						team: params.team,
						teamName: params.team.teamName,
						teamId: params.team.id
					} : {
						teamName: params.teamName,
						sortNo: params.teamSortNo
					}
					if (this.addOverviewForm.addType == 1) {
						this.addOverview(params)
					} else if (this.addOverviewForm.addType == 2) {
						this.addGroup(params)
					}
				}
			});
		},

		addOverview(params) {
			console.log(params)
			addPage(params).then(response => {
				this.msgSuccess("新增成功");
				this.addOverviewDialogVisible = false;
				this.getAllGroupAndOverview();
			});
		},

		addGroup(params) {
			console.log(params)
			addTeam(params).then(response => {
				this.msgSuccess("新增成功");
				this.addOverviewDialogVisible = false;
				this.getAllGroupAndOverview();
			});
		},

		//处理关闭添加分组弹窗的方法
		handleAddOverviewDialogClose(done) {
			done()
		},

    handleClick(tab, event){
		  if(this.activeName==='first'){
        this.menuActiveIndex='0-0';
        let page=this.publicList[0].pageList[0]
        this.handlePageSelect(page)
      }
      else if(this.activeName==='second'){
        this.menuActiveIndex='0-0';
        let page=this.groupList[0].pageList[0]
        this.handlePageSelect(page)
      }
    },

		/** 提交按钮 */
		submitForm() {
			// console.log(this.setupForm)
			// return
			let params = {
				...this.setupForm
			}
			this.$refs["setupForm"].validate(valid => {
				if (valid) {
					params.showItem = this.setupForm.showItem.join(",")
					params.pageId = this.selectUserPage.id
					params.sortNo = this.componentList.length + 1
					if (this.setupForm.id != null) {
						updateItems(this.setupForm).then(response => {
							this.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addItems(params).then(response => {
							this.msgSuccess("新增成功");
							this.open = false;
							this.setupComponentVisible = false
							this.getComponentsByPageid()
							this.reset()
						});
					}
				}
			});
		},

		cancel() {
			this.reset()
			this.setupComponentVisible = false
		},


		reset(done) {
			console.log('reset is running')
			this.activeChartTypeIndex = null
			this.windowTypeIndex = null
			this.setupForm = {
				pageId: null,
				componentName: null,
				analyticsType: null,
				remark: null,
				dateUnit: null,
				chartType: null,
				showItem: [],
				windowType: null,
				sortNo: null,
			}
			if (done) done()
		},

		allowDrop(draggingNode, dropNode, type) {
			let draggingNodeType = draggingNode.data.treeType
			let dropNodeType = dropNode.data.treeType
			if (draggingNodeType == dropNodeType && type != 'inner') {
				return true
			} else if (draggingNodeType == 'S' && dropNodeType == 'F' && type == 'inner') {
				return true
			} else {
				return false
			}
		},

		handleGroupSortCheckChange(data, checked, indeterminate) {
			this.checkedTreeIdList = this.$refs['tree'].getCheckedKeys()
		},

		openMovePop(node, data) {
			console.log(node)
			data.btnActive = true
			this.activeBtnId = data.treeId
		},

		handleCancelLittlePop(data) {
			data.btnActive = false
		},

		handleMove(data) {
			data.btnActive = false
			let itemIndexes = this.treeMap[data.createTime] && this.treeMap[data.createTime].split('-')
			console.log(itemIndexes)
			if (itemIndexes.length == 2) {
				this.groupList[itemIndexes[0]].pageList.splice(itemIndexes[1], 1)
				this.groupList[this.overviewMoveTo].pageList.push(data)
				this.overviewMoveTo = null
				this.activeBtnId = ''
			}
		},

		beforePopHide() {
			console.log('trigger beforePopHide')
		},

		itemsMoveTo() {
			let moveToIndex = this.overviewMoveTo
			this.checkedTreeIdList.forEach(treeId => {
				let itemIndexes = this.treeMap[treeId] && this.treeMap[treeId].split('-')
				if (itemIndexes.length == 2) {
					let overview = this.groupList[itemIndexes[0]].pageList[itemIndexes[1]]
					this.groupList[itemIndexes[0]].pageList.splice(itemIndexes[1], 1)
					this.groupList[moveToIndex].pageList.push(overview)
				}
			})
			this.overviewMoveTo = null
			this.itemsMoveToPopVisible = false
		},

		cancelAllCheck() {
			console.log('取消多选')
			this.$refs['tree'].setCheckedKeys([])
		},

		addNewGroup() {

		},

		handleSelectionChange(selection) {
			console.log(selection)
			this.selection = selection
		},

		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除我的概览编号为"' + ids + '"的数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delTeam(ids);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(() => { });
		},

		/** 导出按钮操作 */
		handleExport() {
			// const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有我的概览数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.exportLoading = true;
				return exportTeam(queryParams);
			}).then(response => {
				this.download(response.msg);
				this.exportLoading = false;
			}).catch(() => { });
		},

		manageGroupSortFun() {
			mamagePageTeams(this.groupList).then(response => {
				this.manageGroupSortVisible = false;
				this.msgSuccess("操作成功");
			});
		}
	}
};
</script>
<style lang="scss">
#app .page-team .el-container-mode .el-menu-vertical .el-submenu .el-submenu__title {
	padding-left: 20px !important;
}

.page-team {
	background-color: #f0f2f5;
	height: calc(100vh - 84px);
	width: 100%;
	padding: 0;

	.el-container-mode {
		height: 100%;
		width: 100%;

		.menu-bar {
			height: 100%;
			background-color: #ffffff;
			position: relative;
			width: 200px;

			.menu-buttons {
				display: flex;
				width: 150px;
				height: 34px;
				border-radius: 17px;
				position: absolute;
				background-color: #F5B126;
				color: #FFFFFF;
				bottom: 20px;
				left: 5px;
				z-index: 10000;

				&>span {
					width: 33.3%;
					height: 100%;
					line-height: 34px;
					text-align: center;
				}
			}

		}

		.el-menu-vertical:not(.el-menu--collapse) {
			width: 180px;
			min-height: 400px;
			height: calc(100% - 70px);
		}

		.el-menu-vertical {
			border: none;

			.el-submenu {

				// padding-left: 10px;
				.el-submenu__title {
					// padding: 20px !important;
				}

				.menu-icon {
					// margin-left: 18px;
				}

				.group-menu {
					background-color: unset !important;
					box-sizing: border-box;
					min-width: unset;
					width: 100%;
					padding: 0 0 0 40px !important;

				}

			}

			.el-menu-item {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.el-main-mode {
			width: calc(100% - 180px);
			padding: 0;
			position: relative;

			.overview-header {
				height: 70px;
				color: #555555;
				display: flex;
				padding: 20px 20px 0 20px;
				background-color: #F0F2F5;
				position: absolute;
				width: 100%;

				.floder {
					font-size: 22px;
				}

				.page-title {
					margin-left: 10px;
					padding-top: 5px;
				}

				.add-component-button {
					position: absolute;
					right: 20px;
				}

			}

			.overviews {
				width: 100%;
				box-sizing: border-box;
				padding: 70px 0px 20px 16px;
			}

			.component {
				background-color: #FFFFFF;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 14px 20px;
				margin: 0 1% 20px 0;
				float: left;
				min-width: 400px;
			}

			.big {
				height: 366px;
				width: 99%;
			}

			.medium {
				width: 49%;
				height: 340px;
			}

			.small {
				height: 158px;
				width: 24%;
			}
		}
	}

	.add-component {
		font-size: 16px;

		.el-dialog {
			.el-dialog__header {
				border-bottom: 1px solid #E0E0E0;
			}

			.el-dialog__title {
				font-size: 16px;
				color: #444444;
			}

			.el-dialog__body {
				width: 100%;
				box-sizing: border-box;
				padding: 15px;
				display: flex;

				.left-content-item:hover {
					border: 1px solid #F5B126;
					background-color: red;
				}

				.left-content {
					width: 74%;
					border-right: 1px solid #E0E0E0;
					box-sizing: border-box;
					padding-right: 10px;

					.content-title {
						font-size: 14px;
						padding-bottom: 12px;
					}

					.content-items {
						display: flex;
						justify-content: space-around;
						flex-wrap: wrap;

						.left-content-item {
							background-color: #F5F8FC;
							width: 29%;
							height: 120px;
							margin-bottom: 20px;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: center;
							color: #797C7F;
							box-sizing: border-box;
							padding: 12px 0;
							border: 1px solid #E9F0F7;
							border-radius: 5px;

							&:hover {
								border: 1px solid #F5B126;
								color: #F5B126;
								cursor: pointer;
							}

							.item-icon {
								height: 40px;
								line-height: 45px;
								width: 40px;
								border-radius: 50%;
								background-color: #FFFFFF;
								text-align: center;

								i {
									font-size: 20px;
								}
							}
						}
					}
				}

				.right-content {
					width: 26%;
					padding-left: 10px;

					.content-title {
						font-size: 14px;
						padding-bottom: 12px;
					}

					.right-content-items {
						width: 100%;

						.right-content-item {
							width: 84%;
							background-color: #F5F8FC;
							height: 120px;
							margin-bottom: 20px;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: center;
							color: #797C7F;
							box-sizing: border-box;
							padding: 12px 0;
							border-radius: 5px;
							margin: 0 auto 20px;
							border: 1px solid #E9F0F7;

							&:hover {
								border: 1px solid #F5B126;
								color: #F5B126;
								cursor: pointer;
							}

							.item-icon {
								height: 40px;
								line-height: 45px;
								width: 40px;
								border-radius: 50%;
								background-color: #FFFFFF;
								text-align: center;

								i {
									font-size: 20px;
								}
							}
						}
					}
				}
			}
		}
	}

	.setup-component {

		.el-dialog__header {
			border-bottom: 1px solid #E0E0E0;
		}

		.el-dialog__title {
			font-size: 16px;
			color: #444444;
		}

		.el-dialog__body {
			box-sizing: border-box;
			width: 100%;
			padding: 30px 50px 10px;

			.el-form-item__label {
				font-weight: normal;
			}

			.chartype {
				.chart-type-item {
					height: 48px;
					width: 54px;
					border: 1px solid #eeeeee;
					margin-right: 10px;
					display: inline-flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding-top: 4px;
					border-radius: 4px;
					color: #97A7BD;
					position: relative;
					cursor: pointer;

					&>span {
						font-size: 11px;
						line-height: 16px;
						margin-top: 6px;
					}

					&>i {
						font-size: 14px;
					}

					.check-tag {
						position: absolute;
						right: 0;
						top: 0;
						display: inline-block;
						border-top: 22px solid #F5B126;
						border-left: 25px solid transparent;

						&>i {
							position: absolute;
							top: -20px;
							left: -12px;
							font-size: 9px;
							color: #FFFFFF;
						}
					}
				}

				.active {
					border: 1px solid #F5B126;
					color: #F5B126;
				}

				.forbidden {
					background-color: #eff2f7;
					color: #c0ccda;
					border: 1px solid #e3ecf6;
					// pointer-events: none;
					cursor: not-allowed;
				}

			}

			.window-type {
				.window-type-item {
					display: inline-flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 59px;
					width: 94px;
					color: #97A7BD;
					border: 1px solid #E3ECF6;
					margin-right: 20px;
					border-radius: 4px;
					box-sizing: border-box;
					position: relative;

					.window-type-back {
						height: 24px;
						width: 76px;
						margin-bottom: 4px;
						background-repeat: no-repeat;
						background-size: contain;
					}

					.small {
						background-image: url(https://family.demo.sensorsdata.cn/new/47f9d6c72e6c9f07bedd4894f78216d6.svg);
					}

					.medium {
						background-image: url(https://family.demo.sensorsdata.cn/new/cd397327b88d20cafdec4aa222fa496f.svg);
					}

					.big {
						background-image: url(https://family.demo.sensorsdata.cn/new/07554ae4c9c9e4d4f324dc0af0a2f3db.svg);
					}

					.label {
						font-size: 11px;
						line-height: 14px;
					}

					.check-tag {
						position: absolute;
						right: 0;
						top: 0;
						display: inline-block;
						border-top: 22px solid #F5B126;
						border-left: 25px solid transparent;

						&>i {
							position: absolute;
							top: -20px;
							left: -12px;
							font-size: 9px;
							color: #FFFFFF;
						}
					}
				}

				.active {
					border: 1px solid #F5B126;
					color: #F5B126;
				}

				.forbidden {
					background-color: #eff2f7;
					cursor: not-allowed;
					color: #c0ccda;
				}
			}

		}
	}

	.addOverviewOrGroup {
		.el-dialog__header {
			height: 50px;
			border-bottom: 1px solid #E9F0F7;

			.el-dialog__title {
				font-size: 16px;
				color: #1f2d3d;
			}
		}

		.el-form--label-top .el-form-item__label {
			padding: 0;
		}

		.el-form-item--small.el-form-item {
			margin-bottom: 5px;
		}
	}

	.manage-group-sort {
		.el-dialog__header {
			padding: 0;
		}

		.el-dialog__headerbtn {
			display: none;
		}

		.group-sort-header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			height: 53px;
			box-sizing: border-box;
			padding: 10px 20px;
			color: #333333;

			.el-input {
				margin-right: 10px;
			}
		}

		.group-sort-body {

			.el-tree-node__content {
				height: 30px;
			}

			.is-disabled {
				display: none;
			}

			.custom-tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding-right: 8px;

				.move-btn {
					display: none;
				}

				&:hover .move-btn {
					display: block;
				}

				.btnActive {
					display: block;
				}
			}

		}

		.el-dialog__footer {
			padding: 0;
		}

		.dialog-footer {
			position: relative;
			border-top: 1px solid #eeeeee;
			padding: 10px 20px;
			box-sizing: border-box;

			.add-group-btn {
				position: absolute;
				left: 20px;
			}
		}
	}

	.manage-my-overview {
		.el-dialog__header {
			display: none;
		}

		.el-dialog__body {
			height: 100%;
			width: 100%;
			background-color: #F7F9FA;

			.line1 {
				height: 30px;
				margin-bottom: 16px;
				font-size: 20px;
				font-weight: 600;
				color: #1E1E1E;
			}

			.line2 {
				display: flex;
				align-items: center;
				position: relative;

				&>* {
					margin-right: 20px;
				}

				.label {
					display: inline-block;
					margin-right: 8px;
				}

				.right-menu {
					position: absolute;
					right: 0;
				}
			}

			.table {
				margin-top: 18px;

				.el-table .el-table__header-wrapper th,
				.el-table .el-table__fixed-header-wrapper th {
					background-color: #FFFFFF;
				}
			}
		}
	}

	.share-setup {

		// height: 228px;
		.el-dialog__header {
			display: none;
		}

		.el-dialog__body {
			padding: 0;
		}

		.setup-title {
			height: 55px;
			display: flex;
			position: relative;
			align-items: center;
			padding: 16px 24px;
			box-sizing: border-box;
			border-bottom: 1px solid #eeeeee;

			&>span {
				font-size: 16px;
			}

			i {
				position: absolute;
				font-size: 30px;
				right: 24px;
				color: #666666;
			}
		}

		.setup-content {
			height: 120px;
			padding: 24px;
			box-sizing: border-box;

			.radio-group {
				margin-bottom: 20px;
			}
		}

		.btns {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;
			padding: 16px 24px;
			border-top: 1px solid #eeeeee;
		}
	}
}

.page-overview-little-pop {
	padding: 0;

	.el-popover__title {
		height: 42px;
		line-height: 42px;
		text-align: center;
		border-bottom: 1px solid #eeeeee;
	}

	.line1 {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 12px;

		.el-select {
			margin-left: 12px;
		}
	}

	.line2 {
		height: 42px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding-right: 12px;
		border-top: 1px solid #eeeeee;
		margin: 0;

		.el-button {
			margin-left: 12px;
		}
	}
}

.el-tabs__nav .is-top {
	transform: translateX(16px);
}

.el-tabs__active-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	background-color: #dfe4ed !important;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	list-style: none;
}
</style>
